import React from "react";
import './login.css'
import taoBao from "./images/taobao.png";
import cbu from "./images/1688.png";
import weiBo from "./images/weibo.png";
import aLiPay from "./images/alipay.png";
import youMeng from "./images/youmeng.png";

const styleTaobao = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+taoBao+')',
  verticalAlign: 'middle',
  marginRight: '5px',
  cursor: 'pointer',
}
const styleCbu = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+cbu+')',
  verticalAlign: 'middle',
  marginRight: '5px',
  cursor: 'pointer',
}
const styleWeibo = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+weiBo+')',
  verticalAlign: 'middle',
  marginRight: '5px',
  cursor: 'pointer',
}
const styleAlipay = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+aLiPay+')',
  verticalAlign: 'middle',
  marginRight: '5px',
  cursor: 'pointer',
}
const styleUmeng = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+youMeng+')',
  verticalAlign: 'middle',
  marginRight: '5px',
  cursor: 'pointer',
}



function CenterFoot() {
  return(
    <div className="third-party-login">
        <div className="third-party-login-text">其他登录方式</div>
        <a className="third-party-login-link"
           href={"https://account.aliyun.com/login/third_party_bind_login.htm?"+
           "type=taobao&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2Factivity%2F618%2Findex%3Fspm%"+
           "3D5176.12901015.0.i12901015.2339525c8PCE7a%26scm%3D20140722.2018.5.2000&isMobile=false"}
           target="_top">
          <div className="third-party-login-icon taobao" style={styleTaobao}></div>
        </a>
        <a className="third-party-login-link" target="_top"
           href={"https://account.aliyun.com/login/third_party_bind_login.htm?"+
           "type=cbu&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2Factivity%2F618%2Findex%3Fspm%"+
           "3D5176.12901015.0.i12901015.2339525c8PCE7a%26scm%3D20140722.2018.5.2000&isMobile=false"}>
          <div className="third-party-login-icon cbu" style={styleCbu}></div>
        </a>
        <a className="third-party-login-link" target="_top"
           href={"https://account.aliyun.com/login/third_party_bind_login.htm?"+
           "type=weibo&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2Factivity%2F618%2Findex%3Fspm%"+
           "3D5176.12901015.0.i12901015.2339525c8PCE7a%26scm%3D20140722.2018.5.2000&isMobile=false"}>
          <div className="third-party-login-icon weibo" style={styleWeibo}></div>
        </a>
        <a className="third-party-login-link" target="_top"
           href={"https://account.aliyun.com/login/third_party_bind_login.htm?"+
           "type=alipay&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2Factivity%2F618%2Findex%3Fspm%"+
           "3D5176.12901015.0.i12901015.2339525c8PCE7a%26scm%3D20140722.2018.5.2000&isMobile=false"}>
          <div className="third-party-login-icon alipay" style={styleAlipay}></div>
        </a>
        <a className="third-party-login-link" target="_top"
           href={"https://account.aliyun.com/login/third_party_bind_login.htm?"+
           "type=umeng&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2Factivity%2F618%2Findex%3Fspm%"+
           "3D5176.12901015.0.i12901015.2339525c8PCE7a%26scm%3D20140722.2018.5.2000&isMobile=false"}>
          <div className="third-party-login-icon umeng" style={styleUmeng}></div>
        </a>
      </div>
  );
}

export default CenterFoot;